<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box {
                --delay: 0s;
                width: 50px;
                height: 50px;
                background-color: red;
                margin: 100px;
                animation: move 1s linear var(--delay) forwards paused;
            }
            input {
                margin: 100px;
            }
            @keyframes move {
                to {
                    border-radius: 50%;
                    background-color: aqua;
                    transform: translateX(200px) scale(2);
                }
            }
        </style>
    </head>
    <body>
        <p>
            此效果实际上利用了动画的初始位置，动画实际上没有运行，而是一直暂停着的
        </p>
        <p>
            动画的延迟时间如果是设置的负值，动画就会从100%开始运行，不同的延迟时间，元素的初始状态就不同
        </p>
        <p>所以一直改变延迟时间，元素的初始状态就一直在改变</p>
		<p>此处动画的总长时间为1s，所以延迟时间设置在负的0-1s之间就可以对应相应的动画状态了</p>
        <div class="box"></div>
        <input
            type="range"
            name=""
            max="1"
            min="0"
            step="0.01"
            id=""
            oninput="onInput()"
        />
        <script>
            const inp = document.querySelector("input");
            const box = document.querySelector(".box");
            function onInput() {
                box.style.setProperty("--delay", `${-inp.value}s`);
            }
            onInput();
        </script>
    </body>
</html>
